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CREATING AND USING ICONS 


Designing and Making Bullets, Symbols, Icons, and Logos 


In this chapter, you will learn: 
è How to work with small images 
è About creating bullets and symbols 
è How to implement icons in Web pages 
è About designing logos 
è How to create and implement favorites icons 


D ifferent types of Web graphics accomplish different objectives. Photographs 
usually provide informative content along with text, while background 
images decorate Web pages and can make them appealing and attractive. A third 
type of Web graphic, an icon, does both. Icons provide the user information in 
a decorative way. 


Icons include bullets, symbols, logos, favorites icons, and buttons. Buttons 
deserve special attention and are covered in detail in the “Creating and Using 
Buttons” chapter. This chapter focuses on all other types of icons. 


The first step in designing icons is to understand their function relative to the 
other elements of a Web page. All icons share the purpose of qualifying and iden- 
tifying accompanying text. A logo identifies a page or site, a bullet indicates that 
nearby text is important, and a button reinforces a text link by helping to iden- 
tify its destination. 


Because their role is to complement the content of a page, icons typically are 
small and have reduced color palettes. Trying to convey meaning in a small space 
is a challenge. To meet this challenge, you can use symbols, which usually rep- 
resent larger concepts. When created properly, a good icon can replace several 


lines of text. 
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WORKING WITH SMALL IMAGES 


The biggest challenge in creating an icon is working within a small area. Instead of using 
the bold strokes of a paintbrush, you often need to precisely manipulate individual pix- 
els. You can create small graphics by drawing them in an image editor, using text, or by 
reducing the dimensions of a larger image. 


Setting the Environment 


Before you create an icon, you must set up your work environment so you can easily 
see what you are doing. The following techniques use Photoshop, but you can use other 
image-editing applications. 


Increasing Magnification 


In general, you should work at a magnification near 1000%, then return to 100% to pre- 
view the icon as it will appear in the Web page. The easiest way to zoom in and out is 
with the Magnifying Glass tool, also called the Zoom tool. To zoom in, click the Zoom 
tool and then click the image; to zoom out, hold down the Alt key (Windows) or 
Option key (Macintosh) and click the image. You also can drag the Zoom tool across 
the image to zoom in to the selected area, as shown in Figure 6-1. 


ig Untitled-1 @ 100% (R... BEES 
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Figure 6-14 Dragging the Zoom tool across an image 


You can change magnification in other ways. You can click View on the menu bar, and 
then click Fit on Screen to zoom in to the image until the outer edges of the canvas 
area fill the visible Photoshop window. To return the magnification to 100%, click View 
on the menu bar, and then click Actual Pixels; you also can double-click the Zoom tool 
to change magnification. 


Another way you can control magnification is in the Navigator palette, shown in 
Figure 6-2.The Navigator palette usually is found with the Info palette in the upper- 
right corner of the workspace. If you do not see it, select Show Navigator from the 
Window menu. Drag the slider to the left to reduce magnification, and to the right 
to magnify the image. 
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The red area in the Navigator palette shows the 
visible area in the image window 


Current scale 


Decrease scale 
Scale slider bar 
Increase scale 


Figure 6-2 Using the Navigator palette for zooming 


Using Grids 


After you magnify an image, it is difficult to distinguish one pixel from another within a 
solid color. In Photoshop, you can place a grid over images to show the position of every 
pixel, as shown in Figure 6-3. In the figure, every pixel that composes the letter R is clearly 
delineated. 


Figure 6-3 Using a grid to clearly distinguish pixels 


After you display the grid, you can set its spacing. 
To display the grid and set spacing: 
1. Click View on the menu bar, point to Show, and then click Grid. You see a 


grid similar to the one shown in Figure 6-3. 


2. To set the spacing of the grid, click Edit on the menu bar, point to 
Preferences, and then click Guides & Grid. 


3. In the Preferences dialog box, shown in Figure 6-4, change the values in the 
Gridline and Subdivisions text boxes. Set the Gridline to appear every 10 pixels, 
and set the Subdivisions to 10; the grid displays a gray line between every pixel, 
with a thicker black line every 10 pixels. 
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Preferences 


Guides & Grid 


Light Blue 


Figure 6-4 Adjust grid settings in the Photoshop Preferences dialog box 


Using a Transparent Background 


To indicate transparency, Photoshop uses a different grid which you also can use as a 
guide when creating small images. You see this grid when you create an image. At that 
time, Photoshop presents three options for filling the background. Select white to give 
the new image a white background. Select Background Color to fill the background 
layer with the color you select as the background color. Select Transparent not to fill 
the image, but to display a white and gray checkerboard pattern that disappears as you 
add colors to the image. Figure 6-5 shows an image with a transparent background. 
The checkerboard pattern appears only in Photoshop or ImageReady. In a Web page, 
the transparent pixels are not visible. 


E clearfish.gif ... [=] E3 


Figure 6-5 An image with a transparent background 


You can adjust the size and colors of the transparency grid. In the Preferences dialog 
box, click the top list arrow and then click Transparency & Gamut. The options 
shown in Figure 6-6 appear. The transparent background grid does not always cor- 
respond one-to-one with each pixel in the image, but it helps you keep your place 
as you draw or move layers. 
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Preferences 


Transparency & 


Figure 6-6 Adjust transparency grid settings in the Photoshop Preferences dialog box 


Using Other Tools to Work with Small Images 


You can use any tool to create or edit an icon, but the most useful ones, such as the Pencil 
and Line tools, offer fine control. If you need to add simple shapes or special characters for 
use in your icons, use the Type tool or the Custom Shape tool. Each of these tools is in 
the main toolbar of Photoshop, as shown in Figure 6-7. 


Pencil tool 


Type tool 


Custom Shape tool 


Line tool 


Figure 6-7 The Pencil, Type, Line, and Custom Shape tools 
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Using the Pencil Tool 


The Pencil tool is essentially the same as the Paintbrush tool, except that the drawn 
line has a sharp, jagged edge. The Paintbrush tool draws lines with fuzzy edges, where 
the nearby pixels take on some of the color of the lines. The Pencil tool, however, 
draws only the pixels indicated by the brush head. Figure 6-8 shows a mark made with 
the Pencil tool and one made with the Paintbrush tool. On the right side of the fig- 
ure is a close-up view of the two marks. Note how the jagged Pencil mark is com- 
posed of only black pixels, while the smooth Paintbrush mark is composed of many 
intermediary shades of gray. While the smooth lines usually look better, you have less 
control with the Paintbrush tool than with the Pencil tool. The crisp line of the Pencil 
tool gives you pixel-perfect control when you work on images that might be as small 
as 20 pixels wide. 


Line drawn with the Pencil tool 


| i Line drawn with the Paintbrush tool 
`N "~hi Magnified lines 


Figure 6-8 Marks created with the Paintbrush and Pencil tools 


You can use any brush tool, including the Pencil tool, to draw straight lines. To do so, 
you click the pixel where you want the straight line to start, and then you hold down 
the Shift key and click another part of the image. Photoshop automatically fills in the 
pixels between the two points and creates a straight line. 


Using the Line Tool 


You also can use the Line tool to draw straight lines. The Line tool is grouped with the Shape 
tools in the Photoshop toolbox. Like the other Shape tools (covered in the “Creating and 
Using Buttons” chapter), the Line tool can create vector outlines as well as color pixels. 


When you select the Line tool, the Options bar displays three options for the type of line 
to create. Figure 6-9 shows the Options bar when the Line tool is selected. 


Line tool 


Geometry options 


Create filled region 


Width: 250% | 
—— Create vector shapes 


Figure 6-9 Line tool options 
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The three buttons on the far left of the Options bar determine whether the Line tool 
creates a vector shape or a normal line. Select the third button, named Create Filled 
Region, to create nonvector lines of colored pixels. In the Weight text field, enter the 
width of the line in pixels. You also can select the blending mode, opacity, and whether 
the line is anti-aliased. 

Making Arrows 

You use the Line tool to create arrows by adding an arrowhead to a line. 


To create an arrow in Photoshop: 


1. Click the Line tool in the toolbox. 


2. Click the Geometry list arrow in the Options palette to display the 
Arrowheads palette. 


3. Select whether you want an arrowhead at the start, end, or both ends of the line. 


4. Define the size and shape of the arrowhead. Adjust the width and length of the 
arrowhead as a percentage of the line width. For example, if the line is 4 pixels 
wide, set the arrowhead width to 600% and the height to 300% to create an 
arrowhead that is 24 pixels long and 12 pixels high. 


You also can adjust the concavity of the arrowhead from -50% to 50%; the concavity affects 
the angle of the back of the arrowhead. Figure 6-10 shows the possible arrowhead shapes. 


Three possible shapes for arrowheads 


Width: 1000%, Length: 300%, Concavity: -50% 
| = Width: 400%, Length: 800%, Concavity: 0% 


<— Width: 300%, Length: 1000%, Concavity: 50% 


Figure 6-10 Possible arrowhead shapes 


Using the Custom Shape Tool 


Like the Line tool, the Custom Shape tool creates both vector and bitmap shapes. The 
vector options also are described in the “Creating and Using Buttons” chapter. When 
you select the Custom Shape tool, the Options bar provides settings for size and shape, 
as shown in Figure 6-11. 
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Figure 6-11 Custom Shape Options 


Click the Shape list arrow to select a custom shape. These custom shapes are like cus- 
tom brush heads, but you can size them. If you want more custom shapes, click the 
palette options button in the Custom Shapes palette, then click Custom Shapes.csh. 
You can either replace the current list of shapes, or append it. To use a shape, click 
the Create Filled Region button in the Options bar, and drag the pointer across the 
image as you would when using a Marquee tool. You can create shapes with fixed or 
unconstrained sizes. 


Click the Geometry list arrow in the Options bar to display the Custom Shape Options 
palette. Then select the size of the custom shape as described below: 


a Unconstrained: This lets you create the shape with any size or proportion. 

a Defined Proportions: This forces the shape to maintain the default proportion. 
a Defined Size: This forces the shape to maintain the default size. 

a Fixed Size: This allows you to enter a height and width for the shape. 


a From Center: This creates the shape so that the center remains where you first 
click the mouse. If you do not select this, the shape is drawn from one of the 
corners. 


Using Text to Create Symbols 


You can draw icons with the Pencil tool, but often it is easier to use a shape from a 
symbol font. Most computers have several symbol fonts such as Wingdings or 
Dingbats, which can include over 200 symbols instead of the standard letters, digits, 
and punctuation marks in most fonts. You can download many additional font libraries 
for free from the Web. 


Both Windows and Macintosh operating systems include font preview utilities that let 
you see exactly which symbols and characters are available in each font. The utility is 
called Unicode Character Map in Windows and Key Caps in Macintosh. 


In Windows, click the Start button in the taskbar, point to Programs, click Accessories, 
and then click Character Map. This displays the Unicode Character Map, shown in 
Figure 6-12. 
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Figure 6-12 The Unicode Character Map dialog utility in Windows 
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In Macintosh, click the Apple menu, and then click Key Caps. This displays the dialog 
box shown in Figure 6-13. Select a font from the Key Caps menu. 


Figure 6-13 The Key Caps utility in MacOS 


You can choose any character in any font, copy it, and paste it in Photoshop. 


Reducing Larger Images 


If the symbols in your font libraries are inadequate, you might want to find a larger 
source image and reduce its dimensions to create an icon. You also can reduce your own 
icons as you create multiple versions for different areas on the site. However, smaller 
images have less detail than larger ones, and need additional contrast to be seen clearly. 


Boosting Contrast 


Subtle differences in shading that create smooth text and lines for large images make 
the same text and lines difficult to read in small images. Increase the contrast of 
reduced images to make the image’s detail more visible, as shown in Figure 6-14. 
Click Image on the menu bar, point to Adjust, and then click Levels to open the 
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Levels dialog box. Use the Levels dialog box to normalize contrast before and after 
changing the image size. You also might want to erase the pixels that create soft lines 
at the edges of the image. 


Original image 


Reduced image 


A Reduced image with increased contrast 


Figure 6-14 Reduced image with increased contrast 


Reducing Colors 


You also can increase contrast by decreasing the number of colors used in an image. 
Color reduction removes the less frequently used colors, which are usually the soft-edge 
pixels. Switch to Indexed Color mode to minimize the number of colors in the palette. 
Click Image on the menu bar, point to Mode, and then click Indexed Color to open 
the Indexed Color dialog box. 


In the ImageReady Optimize palette, indicate the number of colors you want to use. 


Working with Transparency 


You can save GIF and PNG format images with transparency. A transparent image includes 
pixels that are clear, and have no color value. When transparent images appear in a Web page, 
background color or images show through the transparent pixels. 


Transparency is useful for images that appear on patterned backgrounds. Without trans- 
parency, these images require solid color squares around them to avoid mismatched pat- 
terns. Transparency also is useful if you use the same icon on different color backgrounds. 
Transparent backgrounds let you use the same icon on any page, regardless of background 
color, then you don’t have to create different icons for every color background used in 
your site. Figure 6-15 shows the awkward results when graphics without transparency are 
used over patterned backgrounds. 


To make pixels transparent, select the pixels, and then press the Backspace or Delete 
key. Use the Magic Wand tool to select pixels of similar color. You get the best results 
by setting the Magic Wand tool options in the Options bar to a Tolerance of 0, and 
deselecting Anti-aliased and Contiguous. Then only pixels of identical color are 
selected. 
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Solid color background 


Background with the same pattern, misaligned 


Transparent background 


Figure 6-15 Web page images, with and without transparency 


Using the Background Layer 


When working with an image with a white or colored background, erasing pixels does not 
make them transparent, rather, it reveals the background color. In this type of image, the 
background layer is indicated in the Layers palette by the word Background in italics next to 
a lock icon. This background layer preserves the color you choose when you create the file. 
If you want to show transparent pixels when you erase parts of the foreground, you first 
must convert the background layer to a normal layer. 


To convert the background layer to a normal layer: 


1. In the Layers palette, double-click the background layer to open the Layer 
Options dialog box. You also can open the Layer Options dialog box by select- 
ing Layer Options from the Layer menu or from the Layers palette menu. 


2. Click OK. Photoshop converts the background layer to a normal layer. Now 
when you erase pixels on this layer, it shows transparent pixels. 


Avoiding Aliasing 


Some Web graphics have an unattractive halo, as in Figure 6-16. The image at the top of 
the figure has an anti-aliased white edge and is on a white background, so no halo is vis- 
ible. The image at the bottom of the figure has the same blurred edge, but is set against a 
gray background, so the halo is visible. 


The halo is caused by pixels that are neither transparent, nor part of the foreground image. 
When an image has an anti-aliased edge, the border between foreground and background 
blurs and develops a gradient between the foreground and background colors. When the 
background color is made transparent, the blurred edge remains and results in the halo 
effect. To avoid these halos, you must either create your image using the same background 
color as the one that will be used in the Web page, or edit the edge pixels to remove any 
pixels of the wrong color. 
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Anti-aliased edge against a white background 


Same image with transparent pixels against a gray background 


Figure 6-16 A transparent image with a halo of unwanted color 


Choosing the Right Background Color 


The easiest way to eliminate halos is to use an image background color similar to the color 
used behind the image in the Web page. The colors and patterns do not have to match 
exactly. The blurred edge caused by anti-aliasing is a gradient between foreground and 
background colors. If your image has the right background color in the first place, the 
blurred edge blends smoothly with the background in the Web page. 


The Optimize palette in ImageReady and the Indexed Color dialog box in Photoshop 
include a Matte option and Transparency check box. Click the Matte list arrow to select 
a color to use as the background color. If the Transparency box is not checked, the matte 
color is applied to all transparent pixels. If the Transparency box is checked, only the 
edge pixels are converted to the matte color. 


Editing Edge Pixels 


You can minimize the appearance of a halo by zooming into the edge between the colored 
and transparent pixels, and then deleting the edge pixels. 


To edit the color of the halo pixels in ImageReady: 
1. Show the Optimize palette and the Color Table palette. 


2. In the Optimize palette, make sure that the Transparency check box is 
checked and the format is set to GIF or PNG-8. 


3. The Color Table palette shows all the available colors, including transparent 
ones. Use the Eyedropper tool to select an edge pixel in the image. The 
selected color swatch is outlined in the Color Table palette. 


4. Click the trash can icon in the Color Table palette to delete the color. 


You also can double-click the color swatch to open the Color Picker dialog 
box. Then choose a new color that produces a less-noticeable effect. Deleting 
or editing a color affects all pixels of that color in the image. 
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Using the Alpha Channel with PNG Images 


One advantage of the PNG format over the GIF format is that PNG images can use up 
to 256 values of transparency. Just as each primary color in an RGB image has a sepa- 
rate color channel, the transparent pixels in an image are collectively called the alpha 
channel. In GIF images the alpha channel is a 1-bit channel, so a pixel has only two 
possible transparency values: on or off. 


Having only two transparency values, means GIF images often have jagged edges—there 
are not enough transparency values to create soft edges. PNG graphics use an 8-bit alpha 
channel, so each pixel has up to 256 possible transparency values ranging from fully opaque 
to fully transparent. Figure 6-17 shows a GIF image on the left with 1-bit transparency 
and a PNG-8 image on the right with 8-bit transparency. With the option of 256 trans- 
parency values, you can blend the edge of any PNG image from opaque to transparent, 
rather than from one color to another. 


Two values for transparency in GIF images results in hard edges 


256 values for transparency in PNG images results in soft edges 


| 
Figure 6-17 Differences between 1-bit GIF transparency and 8-bit PNG transparency 


Now that you are familiar with the tools at your disposal, you can learn how to create 
icons for the Web. 


CREATING BULLETS AND SYMBOLS 


Bullets and other small icons guide the reader’s attention toward important information 
on the page. They should not overwhelm the text itself, and should be only as large as 
necessary to convey information. To express an idea in a small space, you need to rely 
on abstraction and symbolism. 


Understanding Types of Bullets and Symbols 


Logos are used to identify or qualify an entire Web page. Bullets and other icons identify 
or qualify elements such as links or blocks of text within the page. Bullets simply point to 
adjacent text, while other types of icons convey information. 


Using Ratings Symbols 


One common type of icon is the symbol used in ratings scales. These icons are usually 
decorative and add interest to a Web page. Their main function, however, is to provide 
site or product information to the reader at a glance. Ratings symbols illustrate numeric 
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information that is already on a page. For example, a movie review site that rates movies 
on a scale of one-to-five might use an icon with a thumbs-up image to represent the rat- 
ing. Five thumbs-up images represent a high rating, while one represents a low rating. 


To make a ratings symbol or any other icon stand out from the rest of the page, choose 
appropriate shapes and colors for the symbols. Ratings symbols also must be large enough 
to see, but should not crowd out other information on the page. Finally, the symbols must 
accurately reflect the numeric values they represent. 


To indicate fractional values, such as a rating of 2.5, designers often use a combination 
of whole and half symbols. Make sure any shape you use for a rating symbol is easy to 
interpret when it is halved. A half-star is clearly different from a whole star, but half a 
house might look like a narrow house instead of a fraction. Also, fractions smaller than 
one-half are difficult to distinguish, so if you need to use them, consider using a differ- 
ent scale or a simple bar to indicate percentage values. 


To use rating symbols effectively, you must show how the parts relate to the whole. For 
example, if a software review gets a four-star rating, is this four stars out of four, or ten? 
Without an indication of relative amounts, the rating is meaningless. The rating box can 
include text that defines the highest possible value, but a visual cue is easier and faster 
for readers to understand. 


You should include blank or empty ratings symbols to show a rating relative to the high- 
est possible rating. For example, if you are using yellow stars on a blue background, you 
could use gray stars to indicate the remainder of the rating scale, as shown in Figure 6-18. 
Include remainder symbols to the right of the actual ratings symbols. 


Figure 6-18 Relative ratings symbols 


Using Review Symbols 


Another popular type of icon is the review symbol, which provides quick impressions 
of movies, books, and other products. These icons usually appear in a tabular list, such as 
on a search results page, a download page, or a comparative review page. Review sym- 
bols can be simple check mark graphics or more descriptive ones to indicate an editor’s 
choice, popular choices, free selections, and new or popular selections. 


Unlike ratings symbols, review symbols must be distinctive and convey a particular meaning. 
For example, the reader must know if an icon signifies new selections or signifies popular 
selections. In Figure 6-19 the two columns on the left signify something good, the dark blue 
skulls represent something dangerous, and the dollar signs signify money. 
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Bad or dangerous 


Neutral 


Good 


Valuable or costly 


Figure 6-19 Possible review symbols 


Using Bullets 


You can use HTML to include text bullets in a Web page, but you often will want to 
create graphical bullets to add decoration to a page. Bullets, like other icons, are small 
and are used with accompanying text. However, icons and symbols contain informa- 
tion, but bullets do not. Bullets are used only to guide a reader’s attention toward spe- 
cific text. Using bullets is similar to using indentation, boldface, underlining, or other 
formatting features to emphasize words or sentences. Unlike symbols, bullets should 
not call attention to themselves, and should only be visible enough to point a reader 
to adjacent text. 


Bullets always are used with text, as in a bulleted list, but other icons can stand alone. 


Using Symbolic Icons 


Symbolic icons are similar to bullets because they direct a viewer's attention to text, but 
they also provide additional information about the text. A bullet indicates only that a 
line of text is particularly important, but symbolic icons also can qualify the text and 
indicate just why it is important. 


One common symbolic icon is the New icon, which points to content that did not exist 
during the user’s previous visit. Another general icon is the Look or Hot icon, which 
indicates information that is new or popular. One of the most popular symbolic icons 
is the Under Construction icon. It appears beside a link to a page that is not ready to 
be viewed, or on the unfinished page itself. (Programmers and designers debate the mer- 
its of using Under Construction icons; some argue that a page under construction should 
not be linked in the first place.) 
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Designing Bullets and Symbols 


You should follow a few simple rules when designing icons. In general, you should con- 
sider the most appropriate shape, size, and color for the particular icon. These rules are 
not written in stone, but usually they help you create conventionally attractive icons. 


Figure 6-20 shows some sample bullets and icons. The bullets use soft colors and shapes 
to blend into the page and indicate that the adjacent text is important. The symbolic 
icon uses bright colors and angles to demand reader attention. The New icon not only 
announces that the text is important, but also explains why—it’s new. 


> text text text text text text text text te 
text text text text text text text text te 
text text text text text text text text te 
text text text text text text text text te 
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text text text text text text text text te 
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Figure 6-20 Bullet and icon designs 


Selecting a Shape 


The shape of a symbol must capture the attention of the reader. The following guidelines 
help you choose an eye-catching shape for ratings symbols: 


a Angled lines are more eye-catching than curved lines. 
a Diagonal lines are more noticeable than horizontal or vertical lines. 


Ratings symbols often use a five-sided star, which observes both of these rules. A lightning 
bolt or even a simple X also follows the rules and attracts the eye. A square or a circle, on 
the other hand, might not be noticed at all. 


In some ways, bullets and ratings symbols have opposite purposes—a ratings symbol 
draws the reader’s attention to itself, while a bullet points to the accompanying text. 
Therefore, the rules for selecting symbol shapes are reversed for bullets. Instead of using 
angles and diagonal lines, bullets should use curves, horizontal lines, and vertical lines. 
Common shapes for bullets are simple circles, squares, and horizontal lines. 


Selecting a Color 


Shape is not the only element of an icon that makes it stand out; bright colors that con- 
trast with the background also are necessary. If you use a color-neutral symbol such as 
a dollar sign, you can choose a color to contrast with the background (for example, red 
on white). If you use a symbol such as a gold star or stop sign, the color is integral so 
you must change the background color to make the symbol stand out. A yellow star on 
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a white background is not as noticeable as a yellow star on a dark blue background. You 
do not need to alter the entire background of the page—you can merely add a colored 
bar behind a symbol. For example, a dark blue or black background bar makes yellow 
symbols more noticeable. 


Although you normally want the colors of Web graphics to share a common color palette, 
icons should stand apart from the rest of the page. Therefore, it is acceptable for icons to 
have different colors from the other graphics on the site. 


Bullets also need to contrast with the background to be noticeable, but should not be 
so bright that they divert attention from the text. If you choose a very low-contrast 
color for a bullet, the reader sees nothing. A better choice is to make the bullet fit the 
text by imitating the text color, or by using a lower-contrast version of the text color. 
For example, if the text is black on a white background, a black or gray bullet would 
be your best choice. 


Selecting a Size 


Icon size can vary, but in general icons should be only as large as necessary to convey 
information. An average size is 30 X 30 pixels. However, if you use an icon as a button, 
use a larger size to make it easier to click (about 50 X 50 pixels). 


Ratings symbols also should follow these guidelines. Web programmers usually fit rat- 
ings symbols in rows that are 150 pixels wide. The size of each symbol is the total width 
divided by the number of rankings in the scale. A five-star scale, for example, requires 
that each star be 30 pixels wide, and a ten-star scale requires that stars be 15 pixels wide. 
However, these widths also must include margins. A rule of thumb is to allow margins 
that are 25% as wide as the symbol itself. For example, a five-star scale should have 
stars that are 20 pixels wide, with five pixels on either side. 


Bullets should only be large enough to be visible, and should be proportional to the 
size of the text. A bullet that is one pixel wide is too small; a bullet that is 30 pixels 
wide overwhelms the nearby text.A rule of thumb is to make bullets no smaller than 


a lowercase “o” and no larger than two uppercase “W’”’s. Bullets, therefore, should be 
about 15 pixels high and 20 pixels wide, depending on the size of the text. 


Using Symbolism 


A graphical symbol is an object or other visual element that represents a more complex 
idea. An effective icon uses symbolic colors and shapes that are universally recognized. 
A standard American mailbox is not standard elsewhere in the world, so people in other 
countries might not understand that it symbolizes mail. An image of an envelope with 
a stamp is more universal, however, and is more likely to be understood. 


As you create icons, consider how people interpret different colors and shapes. 
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Using Symbolic Colors 


Color symbolism is important not only in designing icons, but in entire Web sites. 
When you design icons, keep in mind the color scheme of the page and the meanings 
attached to colors. 


Many Web icons take their color schemes from road signs and traffic lights. Because most 
people are familiar with these conventions, designers know that green icons might mean 
go, and red might mean stop, for example. 


Color also can have more literal meanings. For example, gold often refers to wealth, and 
green often refers to plants and the natural world. Many literal meanings are culturally 
based, however. Americans associate a certain shade of green with money because all 
USS. paper currency uses that color. In countries that use different colors on their money, 
the significance can be lost. 


Other colors are associated with attitudes or values. Dark blue often indicates conserv- 
ative values and is used prominently in financial Web sites. Black and other dark colors 
sometimes indicate “alternative” values and are used in music sites and other sites tar- 
geted at young adults. Bright, primary colors usually indicate children, and pastels can 
indicate romance or baby-related themes. 


Using Symbolic Shapes 


The shapes you use in your icons are your primary means for communicating through 
images. Some shapes, such as an exclamation point to indicate an alert, have universal 
meaning. Other shapes are relative to their subject. Many symbols are already standard 
on the Web, so the best way to start choosing symbols for your icons is to imitate the 
ones you now see on Web pages. A few symbol conventions include the following: 


a Keys and locks represent online security 

a Envelopes and mailboxes represent e-mail and communication 
a A building with columns represents a government Web site 

= A trash can represents the act of deleting 


These symbols have literal meanings because they relate directly to known objects in 
the real world. Literal symbols are straightforward. A tree can represent a forest and a 
gavel can represent an online auction. Other symbols are less literal and require 
abstraction or reducing an idea to its essential qualities. You use abstraction to con- 
vey concepts that have no visual representation. To represent the idea of newness, for 
example, consider the qualities that distinguish new objects from old ones. New 
objects are often shiny, so you could indicate newness by simulating light beams 
reflecting off the surface of the icon. You also could achieve this effect by making sev- 
eral lines radiate from the icon. 
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Another example of abstraction is an icon that expresses the idea of working together. There 
is no obvious physical representation of this, so you should use visual metaphors. The image 
of a handshake or multiple lines converging could suggest the idea of collaboration. 


The shape, angle, and thickness of the lines you use also suggest meaning in subtle ways. 
Thick horizontal and vertical lines indicate sturdiness, while thin curved lines suggest 
grace. Children’s themes often are suggested by a wavering line, representing a child’s hand- 
writing. Web sites for children sometimes use 45-degree angles in icons, suggesting action 
and movement. Skewed lines at uncommon angles and lines with varying thickness are 
often used in alternative images. Figure 6-21 shows line weights, angles, colors, and shapes 
that create different impressions. 


Stability and security can be represented by: The color 
Blue, Thick lines, Horizontal and Vertical lines 


Grace and finesse can be represented with: Reds and 
pinks, Fine lines, and Curved lines 


fo Children’s sites often use: Primary colors, Wavering 
(a lines, Angled and Curved lines 
| Alternative sites often use: Dark colors, Lines of varying 
thickness, Skewed angles 


Figure 6-21 Creating impressions through symbolism 


IMPLEMENTING ICONS IN WEB PAGES 


You can use most icons in a Web page with a simple IMG tag in HTML. However, some 
types of icons require additional coding. 


Implementing Ratings Symbols in a Web Page 


When creating icons to be used as ratings symbols, create one version of the icon, and 
perhaps a halved version depending on the scale you use. When you implement the icons 
in a Web page, you must repeat the creation process several times, using several IMG tags. 
Having two versions of the icon is an advantage, since you must create only one or two 
graphics that load only once before being cached in the browser. However, when it 
comes time to change the rating, you must edit several lines of HTML. 
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Often, it’s easier to create a separate graphic for every possible value in the ratings sys- 
tem. In a four-star ratings system, for example, you create a file called O.gif that con- 
tains no stars, a file called 1.gif that contains one star, and so on. You have to create 
additional image files, but editing the HTML files is much simpler. When a rating 
changes from 3 to 4, for example, you change the HTML to call 4.gif instead of 3.gif. 
Another advantage of creating a separate file for each value is that it’s easier to con- 
trol the spacing between icons. Figure 6-22 shows how breaking up the symbols 
requires using only a few graphics, while keeping the symbols as single units requires 
using many more image files. 
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Figure 6-22 Implementing rating symbols 


Using Bullets in a Web Page 


To use bullets in a Web page, you can place them to the left of the text. However, 
this often creates extra line spacing above the bullet because text incorrectly wraps 
around the bullet. You can solve this problem with extra HTML code or by using 
style sheets. 


Implementing Bullets with HTML 


Bullets in HTML are created with the UL, OL, and LI tags. These bullets are either 
alphanumeric characters, discs, circles, or squares. You cannot use graphics in HTML bul- 
leted lists. If you place bullet graphics in a Web page, lines break unexpectedly as the text 
wraps around the graphic. You can, however, use the ALIGN attribute of the IMG tag 
to control how the text wraps. Set the ALIGN attribute to the left to force the text to 
wrap without adding extra lines. 
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You also can use the HSPACE and VSPACE attributes to control the margin around the 
bullet. For example, this tag would lead to incorrect spacing in the wrapped text: 


<img src="bullet.gif"> 
This tag would not: 
<img align="left" src="bullet.gif"> 
And this tag would force a seven-pixel margin between the bullet and the text: 


<img align="left" src="bullet.gif" hspace="7"> 


Implementing Bullets with CSS 6 


The HTML solution does not allow you to indent text following a bullet the way 
text indents when you use HTML bullets. Style sheets, on the other hand, let you 
replace the standard discs used for HTML bullets with your own icons. Netscape 
Navigator version 4 does not support this option, but version 6 does. Internet 
Explorer version 5 and later versions support this option. 


In your style sheet, add this definition: 
ul { list-style-image: url(image) } 


Where “image” is replaced by the path and filename of your bullet. Every time you use 
the LI tag in an unordered list, your icon will appear as the bullet. 


Figure 6-23 shows graphical bullets implemented with HTML at the top of the figure 
and with style sheets at the bottom. 


A plain IMG tag results in improper text wrappin 
iy text text text text text text text tq P 8 prop pping 
text text text text text text text tey 


text text text text text text text text tq 
WP text text text text text text text td 


tekt text text text text text text text t x š F ii "gL 
ioe Adding the ALIGN attribute and setting it to “left” fixes the problem 
p text text text text text tey 
Style sheets allow you to indent the bulleted text 


text text text text text text text text tq 
tevt text tevt tevt teyt tevt tevt text t 


Figure 6-23 Displaying graphical bullets with HTML or CSS 


DESIGNING LOGOS 


The best way to learn how to design logos is by examining logos on the Web. Try to gain 
an understanding of what makes them succeed or fail. Then start sketching ideas on paper 
and ask people to review and comment on your sketches. 
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Logos must communicate as concisely as possible, using metaphors and symbolism. Site logos 
also should make people remember the Web site, build site identity, and help sell the site. 


Abstracting the Subject of the Site 


If a logo represents an entire Web site or organization, it must communicate the essence 
of the site. To create such a logo, you must consider all aspects of the site, and then include 
only the most important ones. This process requires the same abstraction you use to cre- 
ate symbolic icons. 


A caricature is an abstraction of a human face, and includes only the essential elements. 
Similarly, a logo is a sort of caricature of a Web site. To begin designing a logo, consider 
how you can represent an entire Web site with a small picture. Start by making a list of 
keywords associated with the site, such as those in the following list: 


a The name of the site or organization 


m General adjectives that describe the site (modern, high-tech, old-fashioned, 
American, global) 


a What the site does (commerce, content, community) 
m The subject of the site (books, sports, women, kids) 


For example, for a site about children’s games, list keywords such as children, fun, and 
games; for a site about online financial advice, list keywords such as money, stocks, 
and wealth. 


For each word in the list, think of a visual element that represents the word. The ele- 
ments can be letters or numbers, shapes, colors, or textures. For the children’s games 
site, appropriate visual elements might be primary colors, an abstraction of a child play- 
ing, and simple game pieces such as dice or jacks. For the finance site, appropriate visual 
elements might be a dollar sign, an abstraction of a stock chart, and the color known 
as banker’s blue. 


Creating a Brand 


A site logo needs to be an effective brand for the site. A brand is a unique, easily iden- 
tifiable symbol for the Web site. Many effective brands do not relate in any way to the 
nature of the company. The McDonald’s arches have nothing to do with fast food, and 
the NBC peacock has nothing to do with television. However, these symbols are so 
frequently associated with their companies that you know the name of the company 
because you recognize its logo. 


To create an effective brand, use a simple logo. Think in terms of basic lines and shapes, 
as if you were creating an extra letter of the alphabet. The logo should unambiguously 
represent the site. 
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A brand need not always apply only to a company. Some Web developers create an 
author stamp, which they include at the bottom of pages they’ve designed. The author 
stamp should link to the developer’s own page, but even if users do not follow the link, 
they still see the stamp and associate the quality of the site with it. 


Including the Name 


Big corporations often use just a symbol for their logo, one that does not tie in to the 
product or name. For example, McDonald’s and Disney have logos that are identifiable 
by themselves, and need no text description. 


Most sites, however, need a logo that identifies the site and includes its name and address. 
Not only do people need to remember your logo, they need to remember your URL. 
You can incorporate the URL of the site in small type at the bottom of the logo, or use 
the URL itself as the logo, dressing it with colors and special type. 


Incorporating the Logo into the Page 


Logos almost always are placed in the upper-left corner of Web pages, and are the first 
thing a reader sees as the page loads. In addition to position, you need to incorporate 
the logo into the design of the site. Often a logo is designed along with the site’s page 
layout. Ideally, the layout and logo share a design, and use a color palette (usually two to 
five colors) and other common elements, such as textures, fonts, and line weights. The 
logo should look like it’s part of the site. 


Making Multiple Versions 


Logos should have only a few lines, shapes, and colors. Simple logos are easier for readers 
to recognize and remember, and are easier for you to scale. 


Your logo will appear not only on your Web pages. Other sites might link to your site 
using a smaller version of the logo. You might also want to print the logo on business cards 
and stationery, often in black and white. The logo should not require color or a large size 
to be recognizable. 


As you design your logos, start by creating small, black-and-white versions. When you 
are satisfied with the general shape, create larger versions and add color. 


CREATING AND IMPLEMENTING FAVORITES ICONS 


Internet Explorer version 5 (or later) displays a special type of icon called a favorites 
icon, also known as a favicon. The favicon appears on the left side of the address bar 
and in the Favorites menu of the Internet Explorer Web browser, shown in Figure 6-24. 
Although Internet Explorer is the only browser capable of displaying favicons, it is the 
browser of choice for a majority of Web users. Adding a favicon is an easy way to give 
a professional touch to a Web site. 
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Figure 6-24 Favicons of several popular sites 


Viewing Favicons 


Usually you view favicons from the browser’s address bar, but you also can use options 
in the Favorites menu, which lists favicons for several corporate Web sites. Drag a URL 
to the desktop to create a larger version of the favicon on the desktop. The desktop 
favicon is a shortcut to its associated Web site. Double-click the desktop favicon to 
open a browser window and jump to the site. The larger desktop version is not nec- 
essarily a stretched copy of the icon that appears in the address bar. The favicon file is 
not one bitmap image like a GIF or JPEG file. Favicon files are created in the .ico for- 
mat, which is a special type of directory. An .ico file is actually a collection of a few 
different icons, which have different dimensions and color depths. The particular 
image shown depends on which software displays the favicon. When a browser calls 
the favicon to appear in the address bar, it uses a version that is 16 X 16 pixels large 
and has 16 colors. When the operating system calls the favicon to appear on the desk- 
top, it uses a version that is 32 X 32 pixels large and has 256 colors. If a favicon includes 
only one size, it is stretched to create the other size. 


Creating Favicons 


As of this writing, no major graphics software, including Photoshop, lets you create fav- 
icon files directly. Several freeware and shareware tools do, however. The easiest tool to 
use is a Java applet-based tool available at www.favicon.com. This tool allows you to draw 
a 16 X 16 graphic in 16 colors, and then e-mails you the favicon.ico file free of charge. 


Using Existing Favicons 


Although you cannot create favicons in Photoshop, you can use Photoshop to reduce 
existing logos. In general, only the 16-color, 16 x 16-pixel version is shown, so you don’t 
need to make the 256-color, 32 X 32-pixel version. 
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When you reduce logos to fit in a small space, eliminate all but the most necessary aspects 
of the logo. Examine the favicons on other sites, and note which ones are shrunken ver- 
sions of their logos, and which ones were altered for clarity. 


Using Favicons in a Web Page 


When you browse the Web with Internet Explorer, the browser automatically scans the 
root directory of every site you visit, looking for a file named favicon.ico. If it finds the 
file, the favicon appears in the address bar. Otherwise, the browser displays the default 
Internet Explorer logo. The browser uses either the icon or the default logo when dis- 


playing any page from any directory in the site. 
You can use different favicons for different sections of a site by including a line of 6 
HTML in the head of the HTML file. 


<link rel="SHORTCUT ICON" href="/filepath/myLogo.ico"> 


The name of the favicon must end in .ico and you must use the same name in the 
HTML code. 


Sometimes Internet Explorer does not automatically find the favicon in subdirectories. 
You could place a favicon in every directory to be found by the browser, but it is sim- 
pler to add the HTML tag to every file in the site. 


CHAPTER SUMMARY 


a When working with icons and other small images, use grids and increased 
magnification to clearly see what you are doing. 


a You can create icons by drawing with the Pencil tool, by using text, or by 
reducing a larger image. 


a Symbolic icons must stand out from the rest of the page and convey information 
in a small space. 


a Icons convey meaning not just with symbols, but with colors, line weight, 
and texture. 


a Bullets should blend in with the text, calling attention to the text rather than 
to themselves. 


o You can implement bullets in a Web page with HTML or with CSS. 


a Your logo represents your Web site. It might not indicate the exact content of the 
site, but it does suggest a personality. 

a Begin designing your logo by sketching it on paper, starting with a simple 
black-and-white version. 
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o Favorites icons (favicons) are tiny graphics that appear in the address bar of 
Internet Explorer version 5 and later. 


o The standard favicon uses 16 colors and is 16 X 16 pixels large. 


REVIEW QUESTIONS 


1. What is the best way to display lines over an image to help you see where each 
pixel is located? 


a. Show Guides option 
b. Show Grid option 
c. Transparent background 
d. Any of the above 
2. Which Photoshop tool do you use to draw arrows? 
a. Pencil tool 
b. Pen tool 
c. Paintbrush tool 
d. Line tool 
3. How many levels of transparency can you save in a PNG image? 
a. 0 
b. 1 
c. 16 
d. 256 
4. Which file formats allow transparent areas in an image? 
a. GIF and JPEG 
b. GIF and PNG 
c. PNG and JPEG 
d. GIF JPEG, and PNG 
5. How do you set the magnification to 100%? 
a. Double-click the magnifying glass. 
b. Use the Zoom slider in the Navigator palette. 
c. Click View on the menu bar, and then click Actual Pixels. 


d. Any of the above 
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6. What is the main difference between bullets and symbols? 
a. Bullets are smaller than symbols. 
b. Symbols are smaller than bullets. 
c. Bullets convey more information than symbols. 
d. Symbols convey more information than bullets. 
7. What shape(s) are best for a ranking scale that includes 20 possible ranks? 
a. 20 stars, 5 pixels wide each 


b. 20 circles, 5 pixels wide each 


c. 5 stars, each with ⁄, 4, and % divisions 6 
d. 1 bar 


8. What color bullet is most appropriate to use with white text on a dark red 
background? 


a. Red 
b. Black 
c. White 
d. Green 
9. Which is not an example of a visual metaphor? 
a. A small graph to represent financial data 
b. An @ sign to represent an e-mail link 
c. A lock and key icon to represent online security 
d. A logo of a credit card 
10. How big is an average-sized symbolic icon? 
a. 15 X 15 pixels 
b. 30 x 30 pixels 
c. 60 X 60 pixels 
d. 72 X 72 pixels 
11. Which HTML tag stretches an image to 20 pixels high and 35 pixels wide? 
a. <img src="bar.gif" width="35" height="20"> 
b. <img src="bar.gif" wide="35" high="20"> 
c. <img src="bar.gif" horizontal="35" vertical="20"> 
d.<img src="bar.gif" w="35" h="20"> 
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12. Which browsers support using graphics as bullets with CSS? 
a. Internet Explorer and Netscape versions 4 or greater 
b. Internet Explorer version 5 or greater 
c. Netscape version 4 or greater 
d. No browser supports this feature yet. 


13. Which style sheet definition uses a file named ball.gif as a bullet in an 
unordered list? 


a. UL { list-style: "/ball.gif" } 
b. OL { list-style: image(/ball.gif) } 
c. OL { list-style-image: "/ball.gif" } 
d.UL { list-style-image: url(/ball.gif) } 
14. How should you design multiple versions of a logo? 
a. Start with a large, high-color version. 
b. Start with a large, low-color version. 
c. Start with a small, low-color version. 
d. Start with a small, high-color version. 
15. Should Web site logos include the site’s URL? 
a. Usually, yes 
b. No 
c. Only if the URL is very short 
d. Only if the URL is very long 
16. Where are site logos usually positioned in a Web page? 
a. Upper-left 
b. Top center 
c. Upper-right 
d. Center left 
17. What are the dimensions of favorites icons that appear in the URL address window? 
a. 8 X 8 pixels 
b. 16 x 16 pixels 
c. 32 X 32 pixels 
d. 64 X 64 pixels 
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18. How many colors can you use in a favicon that appears in the URL address window? 
a. 8 
b. 16 
Ci 32 
d. 64 
19. What browsers can display favicons? 
a. Internet Explorer versions 4 and 5 
b. Netscape version 4 or later 


c. Internet Explorer and Netscape versions 4 or later 


d. Internet Explorer version 5 or later 
20. What is an .ico file? 

a. a bitmap image 

b. a type of GIF image 

c. a vector image 


d. a collection of bitmap images 


HANDS-ON PROJECTS 


Before beginning these projects, set the grid preferences as described in this chapter, and 
turn on the grid. 


Project 6-1: Create a Graphical Bullet 


You use HTML bullets in several places in your site, but one page needs more graphical 
treatment to make it interesting. You decide to create a simple bullet. 


Aaus -ol 


Project 


Complete these steps: 


1. In Photoshop, create an image that is 20 pixels wide and 15 pixels high, with a 
transparent background. 


2. Set the foreground color to black and select the Line tool. 


3. In the Options bar, click the Create filled region button. Set a weight of 3, and 
deselect the anti-aliased option. 


4. Set the Geometry options to place arrowheads at the end of the line. 
5. Adjust the shape of the arrowhead to 300% Width, 300% Length, and 10% 
Concavity. 


6. Zoom in to at least 500% magnification. Draw a line across the middle of the 
image while holding down the Shift key, to keep the line perfectly horizontal. 
You should see a very short arrow. If the arrowhead is not symmetrical, erase and 
redraw the line, or use the Pencil tool to touch it up. 
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7. Click Image on the menu bar, point to Mode, click Indexed Color, and accept 
the default settings. Make sure the Transparency check box is selected and Matte 
is set to None. 


8. Click OK and save the file as arrow_bul.gif in a new directory named project_6-1. 


Project 6-2: Create an Icon 
Your site has some new links that you want to emphasize with an icon. 
Complete these steps: 


1. Create an image that is 60 pixels wide and 40 pixels high, with a transparent 
background and RGB color. 


2. Set the foreground color to a shade of red and select the Type tool. 


3. In the Options bar, select any font and set the size to 14 points. Type new! in the 
text area in the bottom half of the window. 


4. Center the text with the Move tool. 


5. Select the Custom Shape tool. From the Shape menu in the Options bar, select 
the 10 Point Star. 


6. Set the options to Create filled region. Create a new layer behind the text layer. 
7. Set the foreground color to yellow. 


8. Drag the Custom Shape pointer over the rear layer to create a yellow star 
behind the text. 


9. Set the foreground color to green. Select the background layer, click Edit on 
the menu bar, and then click Stroke. 


10. In the dialog box that appears, set the Width to 1 pixel, set the Location to 
Outside, and leave the other settings at their default values. Click OK. You should 
see a one-pixel wide, jagged loop outlining the star. 


11. Trim the extra transparent background pixels. 
12. Reduce colors by setting the image to Indexed Color mode. Preserve transparency. 


13. Save the image as new.gif in a new folder named project_6-2. 


Project 6-3: Create Ratings Symbols 


You are creating a site that reviews romance novels. The books are rated on a scale of 
one to four, with half rankings allowed. You decide to represent the ratings with heart- 
shaped icons. Naturally, you choose red for the color. It will stand out on the page’s white 
background. 

Complete these steps: 

1. Create a 26 X 26-pixel RGB image. 


2. Set the foreground to a rose color by entering 204 for Red, 51 for Green, and 102 
for Blue (#CC3366 in hexadecimal). 


13. 


Hands-on Projects 251 


Select the Custom Shape tool and select the Heart from the Shape menu. Make 
sure the Anti-aliased check box is selected. 


Drag the Custom Shape pointer to add the shape to the image. 

Trim the extra background pixels. 

Optimize the image and save it as heart.gif in a new folder named project_6-3. 
Select the right half of the heart with the Rectangular Marquee tool. 

Use the Hue/Saturation dialog box to desaturate the right half of the image. 
Save the new image as heart_half.gif in the project_6-3 folder. 


. Desaturate the left side of the image in the same way and save this image as 


heart_gray. gif. 


. Create anew HTML file and save it as index.html in the project_6-3 folder. 
. Add the following HTML code: 


<img src="heart.gif"><img src="heart.gif"> 
<img src="heart.gif"> 


<img src="heart_half.gif"><img src="heart_gray.gif"> 


Save the HTML file as index.html and preview it in a browser. You should see 
three and one-half hearts out of five. 


Project 6-4: Create a Warning Symbol 


Your site includes a page of links to other sites, some of which contain adult language. You 
want to warn your readers, but text alone does not have enough impact. You decide to cre- 
ate a warning icon to alert readers and guide them toward explanatory text. You choose to 
imitate the shape and color of a yellow road sign, and to use an exclamation point. 


Complete these steps: 


1. 


In ImageReady, create a 50- x 50-pixel RGB image with a transparent 
background. 


Set the foreground color to black and select the Line tool. In the Options bar, 
set the type to Create filled region. Set the weight to 2 pixels and deselect the 
Anti-aliased option. 


Create a straight line across the bottom of the image. 


Click the lower-left corner of the image and create a 60-degree line. Look at 
the Info palette and watch the A value to note the angle of the line. 


Click the lower-right corner of the image and create a 120-degree line that 
connects the two existing lines. Use the Eraser tool to eliminate any leftover 
line segments. 


Use the Type tool to add an exclamation point to the image. Make the size 
35 points or any size that nearly fits the triangle. 
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7. Set the foreground color to pure yellow. In the Optimize palette, set the Matte 
tool to the foreground color. 


8. Save the optimized image as alert.gif in a new folder named project_6-4. 
9. Create an HTML file with the following HTML code: 

<body bgcolor="f£ff£L00"> 

<img src="alert.gif"> 

</body> 
10. Save the HTML file as index.html in the project_6-4 folder. 


11. Preview the HTML file in a browser; you should see a yellow page with the 
transparent alert icon. Because the matte color is set to yellow, there is no halo 
around the icon. 


Project 6-5: Create a Chat Room Icon 


Your site has a new chat room feature, and you want to link to it from your home page 
with an icon. You cannot easily represent a chat room, so you decide to use the metaphor 
of a speech balloon used in comics. 


Complete these steps: 
1. In ImageReady, create a 30 X 30-pixel RGB image with a white background. 


2. Select the Elliptical Marquee tool. Set the Feather to 0 and select Anti-aliased. 
Create an ellipse in the upper two-thirds of the image. 


3. Click Edit on the menu bar, and then click Stroke. In the dialog box that 
appears, set the Width to 1 pixel, set the Location to Inside, and leave the 
Blending at 100%. Set the Contents to Use Black. Click OK. 


4. Set the foreground color to black. Select the Paintbrush tool. Use a one-pixel 
brush with anti-aliasing. Draw a tail below the ellipse. Erase any extra pixels. 


5. Set the foreground color to dark gray. Set the Line tool to a width of 1 pixel 
and draw four dark lines across the balloon, separated by three or four pixels 
each. The lines should not quite meet the edges of the balloon. 


6. The icon appears over a teal background. In the Optimize palette, set the Matte 
color to #336699. 


7. Double-click the background layer in the Layers palette. In the Layer Options 
dialog box, click OK without changing any of the values. 


8. Select the Magic Wand tool. Set the Tolerance to 0, and then select Anti- 
aliased and Contiguous. Click anywhere in the white background surrounding 
the balloon image. 


9. Click the Optimized tab in the document window. Press the Backspace or 
Delete key. You should see the white background disappear, and a teal halo 
appear around the image. 
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10. Give the icon a color that will help it stand out from the teal. Set the foreground to 
#CC6600 and draw four more lines, each directly below one of the black lines. 


11. Optimize the image and save it as chat.gif. in a new folder named project_6-5. 


12. Copy the HTML file from project 6-4. Replace the background color with the 
teal color used in this project, and replace the image with chat.gif. Save the 
HTML file as index.html in the project_6-5 folder. 


13. Preview the HTML file in a browser. 


Project 6-6: Design a Logo 


For this project, you have to make many of the decisions. There might be more than one 
correct answer. However, some solutions are more appropriate than others. Follow the 
guidelines mentioned in this chapter, and ask your instructor for help if necessary. 


You have been asked to create a logo for a site called matchstick.com, which brings together 
students from different countries by setting up pen pals. 


Complete these steps: 

1. Write 10 words that describe the site. Consider the name, matchstick, and that the 
site deals with international correspondence. 

2. Think of one visual representation for each word on your list. In addition to symbols 
that represent physical objects, consider symbols that represent actions. 

3. With pencil and paper, begin sketching the symbols. Select the two symbols that 
look most attractive together. 

4. Consider which colors, line weights, angles, and textures represent the words on 
your list. 

5. Sketch the two symbols again, considering your answers in step 4. 


6. Begin executing your design in an image editor such as Photoshop. Place each 
visual element on a different layer so you can rotate, scale, and change the colors 
of each element separately. 


7. Your final logo should contain the name of the site, be no wider than 180 pixels 
and no higher than 120 pixels, and use no more than 16 colors in the color palette. 


8. Save the logo as logo.gif or logo.jpg, as appropriate, in a new folder named 
project_6-6. 
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Project 6-7: Design an Author Stamp 


aso You have created several Web sites for your friends and you want to use the pages to 
advertise your Web design skills. You create an author stamp for yourself and place it at 
the bottom of these pages. Like Project 6-6, this project has no singular correct answer, 
but some solutions follow the guidelines of this chapter better than others. 


Complete these steps: 


1. Determine the size of your stamp. Since it is essentially an advertisement, you do 
not want it to overwhelm the actual content of the page. Also, you do not want 
the stamp to hinder loading of the page. Keep the stamp as small and as highly 
optimized as possible. 


2. Select one symbol to use in the stamp. You could use your initials, a silhouette of an 
animal, or a geometric shape. 


3. Choose colors, textures, and line treatments that reflect your design style. 
4. Execute your design in Photoshop. 


5. Save your stamp as stamp.gif or stamp.jpg, as appropriate, in a new folder 
named project_6-7. 


Project 6-8: Create a favicon.ico File 


To give your site professional polish, you decide to create a favicon. 


Aahas -oh 


Project 
Complete these steps: 
1. Open 6-8.tif from the Data Disk. 
2. You must use space wisely. Crop the image to trim the two outer rectangles. 


3. Use the Canvas Size dialog box to crop and pad the image with black to make 
it square. 


. Normalize the contrast, and reduce the dimensions to 16 X 16 pixels. 
. Use the Pencil tool to darken the obscured 2 in the upper-right part of the image. 
. Start your browser and visit www. favicon.com. 


. Either use the Java applet or download the free software to your desktop. 
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. If you are using the applet, follow the instructions and copy your image into 
the 16 x 16 grid in the Favicon Generator tool. When you finish, click File on the 
menu bar of the Generator tool, click Save, and enter your e-mail address. The 
completed favicon.ico file will be mailed to you. 


If you use the downloaded software, follow the directions and save the finished 
file as favicon.ico to a new folder named project_6-8. 


9. View the file in Internet Explorer version 5 or higher. 


Case Project 255 


CASE PROJECT 


Design and create a logo for your site. Study logos used on other sites for ideas about 
size, shapes, and color schemes. Think about what you want to express with the logo. If 
someone links to your site, they might use your logo as a link. The logo needs to clearly 
identify your Web site even when it stands alone. 


Modify the logo to use as a favicon. Use the applet available at www.favicon.com or some 
other software, such as Icon Forge, that generates favicon files. 


